<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg}}</h1>
			<div :class="className"></div>
			<hello-com v-if="isShow"></hello-com>
			<hello-com v-show="isShow"></hello-com>
		</div>

		<script type="text/javascript">
			
			let helloCom = Vue.component("hello-com", {
				template: "<div><h1>{{hello}}</h1> <button @click='changeData'>修改数据</button> </div>",
				data: function() {
					return {
						hello: 'helloWorld'
					}
				},
				methods:{
					changeData:function(){
						this.hello = "helloXiaoMing"
					}
				},
				beforeCreate() {
					console.log('brforeCreate')
					// 此时数据data和事件方法methods还未绑定到app对象上
				},
				created() {
					console.log('create')
					// 数据和方法绑定到应用对象上
				},
				beforeMount() {
					// 渲染之前，根据数据生成的DOM对象是获取不到的
					console.log('brforeMount')
				},
				mounted() {
					// 渲染之后，可以获取到生成的DOM对象
					console.log('mounted')
				},
				beforeUpdate() {
					console.log('beforeUpdate')
					// 数据更改，但内容未更改之前
				},
				updated() {
					console.log('update')
					// 内容已经更新完毕
				},
				beforeDestroy() {
					console.log('beforeDestory')
					// 应用销毁之前
				},
				destroyed() {
					console.log('destory')
					// 应用销毁之后
				},
			})
			
			var app = new Vue({
				el: "#app",
				data: {
					msg: "helloVue",
					className: "redBg",
					isShow:true
				},
				components:{
					'hello-com':helloCom
				},
				beforeCreate() {
					console.log('brforeCreate')
					// 此时数据data和事件方法methods还未绑定到app对象上
					console.log(this)
					console.log(this.msg)
				},
				created() {
					console.log('create')
					// 数据和方法绑定到应用对象上
					console.log(this)
					console.log(this.msg)
				},
				beforeMount() {
					// 渲染之前，根据数据生成的DOM对象是获取不到的
					console.log('brforeMount')
					let dom = document.querySelector("redBg")
					console.log(dom)
				},
				mounted() {
					// 渲染之后，可以获取到生成的DOM对象
					console.log('mounted')
					let dom = document.querySelector("redBg")
					console.log(dom)
				},
				beforeUpdate() {
					console.log('beforeUpdate')
					// 数据更改，但内容未更改之前
				},
				updated() {
					console.log('update')
					// 内容已经更新完毕
				},
				beforeDestroy() {
					console.log('beforeDestory')
					// 应用销毁之前
				},
				destroyed() {
					console.log('destory')
					// 应用销毁之后
				},
				methods: {
					clickEvent: function() {

					},
					isShow:function(){
						this.isShow = !this.isShow
					}
				}
			})
		</script>
	</body>
</html>
